<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="IMDbotty">
    <Require feature="wave" />
    <Require feature="locked-domain" /> 
    <Require feature="dynamic-height" /> 
  </ModulePrefs>
  <Content type="html">
    <![CDATA[     
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");

function init() {
	
	$('#movie').corner("bite 10px").parent().css('padding', '8px').corner("bite 10px");
	$("#ratingbar").progressbar({
			value: {{ movie.ratingInt }}
		});
	
	$('#actions img').click(doReduce);

	if (wave && wave.isInWaveContainer()) {
		wave.setStateCallback(stateChanged);
		
		// call stateChanged to hide details if needed
		stateChanged();
	}
}

gadgets.util.registerOnLoadHandler(init);

// called each time we reduce/expand the gadget
function stateChanged() {
	if (wave.getState()) {
		newState = wave.getState().get('status');
		
		if (newState == 'reduce') {
			reduce();
		}
		else {
			expand();
		}
	}
}

// called when clicking on the reduce button
function doReduce() {
	changeState('reduce');
}

// called when clicking on the expand button
function doExpand() {
	changeState('expand');
}

// hides details to reduce gadget
function reduce() {
	$('#movie').uncorner().parent().css('padding', '0px').uncorner();
	$('.detail').hide('normal');
	$('#frame').animate({width: 350});
	$('#movie').css('padding', '3px');
	$('#title').removeClass('titleExpanded');
	$('#actions').animate({top: 1, right: 3}, 'normal', 'linear', resizeGadget);
	toggleActionButton('expand', 'reduce', doExpand);
}

// shows details to expand gadget
function expand() {
	gadgets.window.adjustHeight(400);
	$('#movie').css('padding', '10px');
	$('#movie').corner("bite 10px").parent().css('padding', '8px').corner("bite 10px");
	$('#cover').removeClass('detail'); // hack for nice expansion
	$('.detail').show('normal');
	$('#cover').addClass('detail').show('slow');
	$('#frame').animate({width: 450}, 'normal', 'linear', resizeGadget);
	$('#title').addClass('titleExpanded');
	$('#actions').animate({top: 10, right: 10});
	toggleActionButton('reduce', 'expand', doReduce);
}

// toggles the expand/reduce button
function toggleActionButton(oldState, newState, clickFunc) {
	$('#actions img').attr('src', $('#actions img').attr('src').replace(newState, oldState))
									 .attr('alt', ucfirst(oldState) + ' details').attr('title', ucfirst(oldState) + ' details')
									 .unbind('click').click(clickFunc);
}

// changes the state of the gadget
function changeState(newState) {
	delta = {'status': newState};
	wave.getState().submitDelta(delta);
}

function resizeGadget() {
	gadgets.window.adjustHeight();
}

function ucfirst (str) {
    str += '';
    var f = str.charAt(0).toUpperCase();
    return f + str.substr(1);
}

</script>
<script type="text/javascript" src="http://imdbotty.appspot.com/assets/jquery.corner.js"></script>
<style type="text/css">


 @import url(http://imdbotty.appspot.com/assets/reset.css);
 @import url(http://imdbotty.appspot.com/assets/style.css);
 @import url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css);

</style>
<div id="frame">
<div id="movie">
<div id="cover" class="detail">
	<a href="{{ movie.url }}" target="_blank">
		<img src="{{ movie.coverURL }}" alt="{{ movie.title }} ({{ movie.year }})" />
	</a>
</div>
<div id="infos">
	<div id="actions">
		<img src="http://imdbotty.appspot.com/assets/reduce.png" alt="Reduce widget" title="Reduce widget" />
	</div>
	<div id="title" class="titleExpanded">
	{% if movie.isTvSerie %}
		<img src="http://imdbotty.appspot.com/assets/tv_icon.gif" title="TV show" alt="TV show" />
	{% endif %}
		<a href="{{ movie.url }}" target="_blank">{{ movie.title }} ({{ movie.year }})</a>
	</div>
	<div id="ratingbar" class="detail"></div>
	<div id="rating" class="detail">{{ movie.rating }}</div>
	{% if movie.isTvSerie %}
		<div id="creatorsLabel" class="label detail">{{ movie.creatorsLabel }}</div>
		<div id="creators" class="values detail">
		{% for creator in movie.creators %}
			<a href="http://{{ movie.subdomain }}.imdb.{{ movie.extension }}{{ creator.url }}" target="_blank">{{ creator.name }}</a>
			<br />
		{% endfor %}
		</div>
	{% else %}
		<div id="directorsLabel" class="label detail">{{ movie.directorsLabel }}</div>
		<div id="directors" class="values detail">
		{% for director in movie.directors %}
			<a href="http://{{ movie.subdomain }}.imdb.{{ movie.extension }}{{ director.url }}" target="_blank">{{ director.name }}</a>
			<br />
		{% endfor %}
		</div>
	{% endif %}
	<div id="actorsLabel" class="label detail">{{ movie.actorsLabel }}</div>
	<div id="actors" class="values detail">
	{% for actor in movie.actors %}
		<a href="http://{{ movie.subdomain }}.imdb.{{ movie.extension }}{{ actor.url }}" target="_blank">{{ actor.name }}</a>
		<br />
	{% endfor %}		
	</div>
</div>
<div id="logo" class="detail"><a href="http://{{ movie.subdomain }}.imdb.{{ movie.extension }}" target="_blank"><img src="http://imdbotty.appspot.com/assets/IMDb.png" alt="IMDb" /></a></div>
<div class="clear detail"></div>
</div>
    ]]>
  </Content>
</Module>